<template>
  <div class="changePassword">
    <topBar></topBar>
    <el-row>
      <el-col :span="16" :offset="4">
        <el-row>
          <el-col :span="17">
            <el-card class="box-card">
              <p style="font-size:24px;margin: 0 0 18px">修改密码</p>
              <el-form
                label-width="100px"
                class="demo-ruleForm"
                :model="pwForm" status-icon :rules="rules" ref="pwForm"
              >
                <el-form-item label="输入密码" prop="inputPassword">
                  <el-input v-model="pwForm.inputPassword" type="password" show-password autocomplete="off"
                            placeholder="输入密码"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="enterPassword">
                  <el-input v-model="pwForm.enterPassword" type="password" show-password placeholder="确认密码"></el-input>
                </el-form-item>
                <el-row>
                  <el-button type="danger" style="float:right" :disabled="btnActive" @click="changePassword">提交</el-button>
                </el-row>
              </el-form>
            </el-card>
          </el-col>
          <el-col :span="6" :offset="1">
            <account></account>
          </el-col>
        </el-row>

      </el-col>
    </el-row>

  </div>
</template>

<script>
  import account from "~/pages/account/account.vue";
  import topBar from '~/components/topBar.vue'
  import * as AccountInfoRequest from '../../assets/accountInfo/accountInfo'

  export default {
    components: {
      account,
      topBar
    },
    data() {
      let validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
          this.btnActive = true;
        } else {
          if (this.pwForm.enterPassword !== '') {
            this.$refs.pwForm.validateField('enterPassword');
          }
          callback();
        }
      };
      let validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
          this.btnActive = true;
        } else if (value !== this.pwForm.inputPassword) {
          this.btnActive = true;
          callback(new Error('两次输入密码不一致!'));
        } else {
          this.btnActive = false;
          callback();
        }
      };
      return {
        pwForm: {
          inputPassword: '',
          enterPassword: ''
        },
        btnActive: true,
        rules: {
          inputPassword: [
            {validator: validatePass, trigger: 'blur'}  //校验文本框是否为空
          ],
          enterPassword: [
            {validator: validatePass2, trigger: 'blur'}
          ],
        }
      };
    },
    methods:{
      changePassword(){
        AccountInfoRequest.changePasswordById(this)
      }
    }
  };
</script>

<style lang="less">
  .changePassword {
    height: 80vh;

    .box-card {
      border-radius: 12px;
      .el-input__inner:hover {
        border-color: red
      }
    }
  }
</style>
